<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="趋势图展示" name="first">
        <ve-line
          v-if="results.length > 0"
          :height="chartHeight"
          :data="chartData"
          :extend="chartExtend"
          :settings="chartSettings"
          :events="events"
        />
        <el-empty v-else description="暂无任何记录" />
      </el-tab-pane>
      <el-tab-pane label="列表数据展示" name="second">
        <div class="ele-table-tool ele-table-tool-default">
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="add">添加</el-button>
        </div>
        <el-table
          border
          stripe
          :data="results"
          :height="height"
          @row-dblclick="detail"
        >
          <el-table-column
            label="编号"
            width="80"
            align="center"
            :formatter="formatter"
          >
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="日期"
            prop="gdate"
            align="center"
            :formatter="formatter"
          />
          <el-table-column
            label="平均温度(℃)"
            prop="temp_avg"
            align="center"
            :formatter="formatter"
          />
          <el-table-column
            label="最低温度(℃)"
            prop="temp_low"
            align="center"
            :formatter="formatter"
          />
          <el-table-column
            label="最高温度(℃)"
            prop="temp_high"
            align="center"
            :formatter="formatter"
          />
          <el-table-column
            label="降雨量(mm)"
            prop="rainfall"
            align="center"
            :formatter="formatter"
          />
          <el-table-column
            label="平均风速(m/s)"
            prop="wind_spd"
            align="center"
            :formatter="formatter"
          />
          <el-table-column
            label="太阳辐射(MJ/m²d)"
            prop="radiation"
            align="center"
            :formatter="formatter"
            width="160"
          />
          <el-table-column
            label="相对湿度(%)"
            prop="humidity"
            align="center"
            :formatter="formatter"
          /><el-table-column
            label="大气压(kPa)"
            prop="pressure"
            align="center"
            :formatter="formatter"
          /><el-table-column
            label="ET0(mm)"
            prop="et0"
            align="center"
            :formatter="formatter"
          /><el-table-column
            label="积温(℃)"
            prop="temp_acc"
            align="center"
            :formatter="formatter"
          /><el-table-column
            label="日照时长(h)"
            prop="sunshine_acc"
            align="center"
            :formatter="formatter"
          /><el-table-column
            align="center"
            label="操作"
            width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary" class="mr12" icon="el-icon-edit" @click="edit(scope.row)">修改</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { formatterForTable } from '@/utils'
export default {
  props: {
    results: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    this.events = {
      click(v) {
        console.log('v', v)
      }
    }
    return {
      activeName: 'first',
      chartSettings: {},
      height: 'calc(100vh - 273px)',
      chartHeight: '722px',
      chartExtend: {
        series: {
          showSymbol: false
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '12%',
          containLabel: true
        }
      }
    }
  },
  computed: {
    chartData() {
      const fields = [
        { namekey: 'gdate', name: '日期' },
        { namekey: 'temp_avg', name: '平均温度(℃)' },
        { namekey: 'temp_low', name: '最低温度(℃)' },
        { namekey: 'temp_high', name: '最高温度(℃)' },
        { namekey: 'rainfall', name: '降雨量(mm)' },
        { namekey: 'wind_spd', name: '风速(m/s)' },
        { namekey: 'radiation', name: '辐射(MJ/m²d)' },
        { namekey: 'humidity', name: '相对湿度(%RH)' },
        // { namekey: 'pressure', name: '大气压(kPa)' },
        { namekey: 'et0', name: 'ET0(mm)' },
        { namekey: 'temp_acc', name: '积温(℃)' },
        { namekey: 'sunshine_acc', name: '日照时长(h)' }
      ]

      return {
        columns: fields.map(val => val.name),
        rows: this.results.map((item) => {
          const temp = {}
          fields.forEach((citem) => {
            temp[citem.name] = item[citem.namekey]
          })
          return temp
        })
      }
    }
  },
  methods: {
    add() {
      this.$emit('add')
    },
    detail(row) {
      this.$emit('detail', row)
    },
    edit(row) {
      this.$emit('edit', row)
    },
    formatter(row, column) {
      return formatterForTable(row, column)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

